import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import api from '../api'
import bcrypt from 'bcryptjs';

function Register () {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [errorMessage, setErrorMessage] = useState('')
    const navigate = useNavigate()

    const handleChangeName = (e) => {
        setName(e.target.value)
    }
    const handleChangeEmail = (e) => {
        setEmail(e.target.value)
    }
    const handleChangePassword = (e) => {
        console.log('handleChangePassword', e.target.value, password)
        setPassword(e.target.value)
    }

    const register = async () => {
        try {
            const salt = await bcrypt.genSalt(10);
            let psd = await bcrypt.hash(password, salt);
            console.log('register1', name, email, password)
          const res = await api.axios.post(api.url.register,{
            "username": name,
              "email": email,
              "password": psd
          });
          let response = res.data
          console.log('register2', response)
          if(response.code === 0) {
                //   sessionStorage.setItem('token', response.token )
                sessionStorage.setItem('user', JSON.stringify(response.data))
                navigate('/')
            } else {
                setErrorMessage(response.message)
            }
          console.log('register2', response);
        } catch (error) {
          console.log(error);
          setErrorMessage(error.message);
        }
    };


    const handleSubmit = (event) => {
        event.preventDefault();
        setErrorMessage('');

        console.log('handleSubmit')

        register()
    
        // if (!username || !password || !confirmPassword) {
        //   setError('请填写用户名和密码！');
        //   return;
        // }
    
        // if (password !== confirmPassword) {
        //   setError('两次输入的密码不一致！');
        //   return;
        // }
    
        // 在 useEffect 中发送注册请求
      };
    

    // useEffect(() => {
        

    //     // if (name && email && password) {
    //     //     register();
    //     //   }
        
    //     // register();
    // }, [name, email, password])

    return (
        <div className="auth-page">
            <div className="container page">
                <div className="row">
                    <div className="col-md-6 offset-md-3 col-xs-12">
                        <h1 className="text-xs-center">Sign up</h1>
                        <p className="text-xs-center">
                            <a href="/login">Have an account?</a>
                        </p>
                        {
                            errorMessage && <ul className="error-messages">
                            <li>{errorMessage}</li>
                        </ul>
                        }
                        
                        <form onSubmit={handleSubmit}>
                            <fieldset className="form-group">
                                <input className="form-control form-control-lg" value={name} onChange={handleChangeName} type="text" placeholder="Your Name" />
                            </fieldset>
                            <fieldset className="form-group">
                                <input className="form-control form-control-lg" value={email} onChange={handleChangeEmail} type="text" placeholder="Email" />
                            </fieldset>
                            <fieldset className="form-group">
                                <input className="form-control form-control-lg" value={password} onChange={handleChangePassword} type="password" placeholder="Password" />
                            </fieldset>
                            <button className="btn btn-lg btn-primary pull-xs-right" type="submit">Sign up</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Register;